
/* 参考文章 https://segmentfault.com/a/1190000043966941 */
.tree {
    flex: 1;
    overflow: auto;
    padding: 0px;
    position: relative;
}

.tree summary {
    outline: 0;
    padding-left: 22px;
    list-style: none;
    background: repeating-linear-gradient(90deg, #c0c4cc 0 1px, transparent 0px 2px) 0px 50%/22px 1px no-repeat;
    /* background: linear-gradient(#c0c4cc,#c0c4cc) 0px 50%/20px 1px no-repeat; */
}

.tree details:last-child {
    background-size: 1px 14px;
}

.tree>details:not(:last-child)>details:last-child {
    background-size: 1px 100%;
}

.tree details {
    padding-left: 28px;
    background: repeating-linear-gradient(#c0c4cc 0 1px, transparent 0px 2px) 28px 0px/1px 100% no-repeat;
    /* background: linear-gradient(#c0c4cc, #c0c4cc) 40px 0px/1px 100% no-repeat; */
}

.tree>details {
    background: none;
    padding-left: 0;
}

.tree>details>summary {
    background: none;
}

.tree summary {
    display: flex;
    align-items: center;
    height: 26px;
    font-size: 14px;
    line-height: 14px;
    color: #000;
    cursor: default;
}

.tree summary::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    height: 26px;
    background: #eef2ff;
    border-radius: 8px;
    z-index: -1;
    opacity: 0;
    transition: 0.2s;
}

.tree summary:hover::after {
    opacity: 1;
}

.tree summary:not(:only-child)::before {
    content: "";
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    margin-right: 8px;
    border: 1px solid #c0c4cc;
    background: linear-gradient(#5f5f5f, #5f5f5f) 50%/1px 8px no-repeat,
        linear-gradient(#5f5f5f, #5f5f5f) 50%/8px 1px no-repeat;
}

.tree details[open]>summary::before {
    background: linear-gradient(#5f5f5f, #5f5f5f) 50%/8px 1px no-repeat;
}

.tree summary:hover .operate {
    opacity: 1;
    visibility: visible;
}

.operate{
    padding-left: 5px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out;
}

.tips-dropdown {
    cursor: pointer;
    padding-left: 5px;
    font-size: 12px;
}

.tips-dropdown:hover {
   color: #16baaa;
}

